<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript_batch</title>
    <style>
        body {
            text-align: center;
            background: #193546;
            color: white;
            font-family: 'helvetica neue', sans-serif;
            font-weight: 100;
            font-size: 50px;
        }
        .controls {
            margin-bottom: 50px;
        }
        input {
            width: 100px;
        }

        /* 
            filter: blur(2px); --- 模糊度 单位px
         */
        /* 方法1
        img { 
            padding: 5px;
            filter: blur(2px); 
            background: pink;
        } */
        img {
            padding: var(--spacing);
            filter: blur(var(--blur)); 
            background: var(--base);
        }

        .hl {
            color: var(--base);
        }

        /* 定义CSS全局变量 --- 使用var调用定义的变量 */
        :root {
            --spacing : 5px;
            --blur : 2px;
            --base : pink;
        }

    </style>
</head>
<body>
    <h2>Update CSS Variables with <span class="hl">JS</span></h2>
    <div class="controls">
        <label for="spacing">Spacing:</label>
        <input id="spacing" type="range" name="spacing" min="10" max="200" value="5" data-sizing="px" />
        
        <label for="blur">Blur:</label>
        <input id="blur" type="range" name="blur" min="0" max="25" value="2" data-sizing="px" />
    
        <label for="base">Base Color</label>
        <input id="base" type="color" name="base" value="#ffc600" />
        
        <img src="./img/flowerCat.jpg" alt="..." style="width: 400px;">
    </div>
    <script>
        const inputs = document.querySelectorAll('.controls input')
        const img = document.querySelector('img')
        const title = document.querySelector('.hl')

        // 方法1
        // function handUpdate() {
        //     switch(this.name){
        //         case 'spacing':
        //             img.style.padding = this.value + 'px'
        //             break;
        //         case 'blur': 
        //             img.style.filter = `blur(${this.value}px)`
        //             break;
        //         case 'base':
        //             img.style.background = this.value
        //             title.style.color = this.value
        //             break;
        //     }
        // }

        function handUpdate() {
            // console.log(this.dataset.sizing); // 获取自定义属性
            const suffix = this.dataset.sizing || ''
            document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix)
        }
        inputs.forEach( input => input.addEventListener('change',handUpdate) )

        
    
    
    </script>
</body>
</html>